import { motion } from 'framer-motion'
import { useState } from 'react'
import avatar1 from '../assets/avatars/avatar1.svg'
import avatar2 from '../assets/avatars/avatar2.svg'

const testimonials = [
  {
    name: "John Doe",
    role: "Senior Developer at Google",
    content: "Cursor has completely transformed how I write code. The AI suggestions are incredibly accurate.",
    avatar: avatar1
  },
  {
    name: "Jane Smith",
    role: "Tech Lead at Microsoft",
    content: "The natural language commands feature is a game changer. It's like having a coding assistant.",
    avatar: avatar2
  }
]

function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)

  return (
    <section className="w-full py-24">
      <div className="mx-auto px-4">
        <motion.h2 
          className="text-center text-4xl mb-12"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          What Developers Say
        </motion.h2>

        <div className="relative max-w-xl mx-auto">
          <motion.div 
            key={currentIndex}
            initial={{ opacity: 0, x: 100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -100 }}
            className="bg-[var(--bg-secondary)] p-8 rounded-xl border border-gray-800"
          >
            <div className="flex flex-col items-center text-center gap-4">
              <img 
                src={testimonials[currentIndex].avatar} 
                alt="avatar" 
                className="w-16 h-16 rounded-full"
              />
              <h3 className="font-bold text-xl">{testimonials[currentIndex].name}</h3>
              <p className="text-gray-400 text-sm">{testimonials[currentIndex].role}</p>
              <p className="text-[var(--text-primary)]">{testimonials[currentIndex].content}</p>
            </div>
          </motion.div>

          <div className="flex justify-center gap-4 mt-8">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentIndex(index)}
                className={`w-3 h-3 rounded-full transition-colors ${
                  index === currentIndex ? 'bg-blue-500' : 'bg-gray-600'
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default Testimonials 